<template>
  <div>
    <div class="nav">
      <router-link to="/parent/view-letter">查看信件</router-link>
      <router-link to="/parent/chat">对话沟通</router-link>
      <router-link to="/parent/more-features">更多功能</router-link>
      <router-link to="/">退出登录</router-link>
    </div>
    <div class="container">
      <h3>请假申请</h3>
      <div class="card">
        <h4>新建请假申请</h4>
        <form @submit.prevent="submitLeave">
          <div class="form-group">
            <label for="studentName">学生姓名：</label>
            <input type="text" id="studentName" v-model="studentName">
          </div>
          <div class="form-group">
            <label for="className">班级：</label>
            <input type="text" id="className" v-model="className" readonly>
          </div>
          <div class="form-group">
            <label for="leaveType">请假类型：</label>
            <select id="leaveType" v-model="leaveType">
              <option value="sick">病假</option>
              <option value="personal">事假</option>
              <option value="other">其他</option>
            </select>
          </div>
          <div class="form-group">
            <label for="startDate">开始日期：</label>
            <input type="date" id="startDate" v-model="startDate">
          </div>
          <div class="form-group">
            <label for="endDate">结束日期：</label>
            <input type="date" id="endDate" v-model="endDate">
          </div>
          <div class="form-group">
            <label for="reason">请假原因：</label>
            <textarea id="reason" rows="4" v-model="reason" placeholder="请填写请假原因..."></textarea>
          </div>
          <button type="submit" class="btn">提交申请</button>
        </form>
      </div>
      <div class="card leave-history">
        <h4>历史请假记录</h4>
        <div v-for="(item, idx) in history" :key="idx" class="history-item">
          <div :class="statusClass(item.status)">{{ item.statusText }}</div>
          <p>请假类型：{{ leaveTypeText(item.type) }}</p>
          <p>日期：{{ item.start }} 至 {{ item.end }}</p>
          <p>原因：{{ item.reason }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ParentLeaveApplication',
  data() {
    return {
      studentName: '张三',
      className: '高一(1)班',
      leaveType: 'sick',
      startDate: '',
      endDate: '',
      reason: '',
      history: [
        { status: 'approved', statusText: '已批准', type: 'sick', start: '2025-06-10', end: '2025-06-12', reason: '感冒发烧' },
        { status: 'pending', statusText: '待审核', type: 'personal', start: '2025-06-25', end: '2025-06-26', reason: '家庭旅行' }
      ]
    }
  },
  methods: {
    submitLeave() {
      if (!this.startDate || !this.endDate || !this.reason) {
        alert('请填写完整信息！');
        return;
      }
      this.history.unshift({
        status: 'pending',
        statusText: '待审核',
        type: this.leaveType,
        start: this.startDate,
        end: this.endDate,
        reason: this.reason
      });
      this.startDate = '';
      this.endDate = '';
      this.reason = '';
      alert('申请已提交！');
    },
    statusClass(status) {
      return {
        'status-approved': status === 'approved',
        'status-pending': status === 'pending',
        'status-rejected': status === 'rejected'
      };
    },
    leaveTypeText(type) {
      if (type === 'sick') return '病假';
      if (type === 'personal') return '事假';
      return '其他';
    }
  }
}
</script>
<style scoped>
@import '../../../css/style.css';
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
.leave-history { margin-top: 30px; }
.history-item { border: 1px solid #ddd; border-radius: 4px; padding: 10px; margin-bottom: 10px; }
.status-approved { color: #28a745; }
.status-pending { color: #ffc107; }
.status-rejected { color: #dc3545; }
</style> 